<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Bootstrap 实例 - 边框表格</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <button
      type="button"
      class="btn btn-default"
      data-toggle="modal"
      data-target="#addTbody"
    >
      增加
    </button>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>名称</th>
          <th>城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr> -->
      </tbody>
      <div
        class="modal fade"
        id="addTbody"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-hidden="true"
              >
                &times;
              </button>
              <h4 class="modal-title" id="myModalLabel">添加到tbody</h4>
            </div>
            <div class="modal-body">
              <div>
                <span>id:</span>
                <input id="tbodyId" type="number" />
              </div>
              <div>
                <span>name:</span>
                <input id="tbodyName" type="text" />
              </div>
              <div>
                <span>city:</span>
                <input id="tbodyCity" type="text" />
              </div>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-default"
                data-dismiss="modal"
              >
                关闭
              </button>
              <button
                id="add"
                type="button"
                class="btn btn-primary"
                data-dismiss="modal"
              >
                确定添加
              </button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
      </div>
      <div
        class="modal fade"
        id="revise"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-hidden="true"
              >
                &times;
              </button>
              <h4 class="modal-title" id="myModalLabel">添加到tbody</h4>
            </div>
            <div class="modal-body">
              <div>
                <span>id:</span>
                <input id="dataId" type="number" />
              </div>
              <div>
                <span>name:</span>
                <input id="dataName" type="text" />
              </div>
              <div>
                <span>city:</span>
                <input id="dataCity" type="text" />
              </div>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-default"
                data-dismiss="modal"
              >
                关闭
              </button>
              <button
                id="rev"
                type="button"
                class="btn btn-primary"
                data-dismiss="modal"
              >
                确定修改
              </button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
      </div>
    </table>
    <script>
      const data = [
        { id: 1, name: "李四", city: "重庆" },
        { id: 2, name: "张三", city: "成都" },
      ];
      function renderTbody(data) {
        $("tbody").empty();
        for (i = 0; i < data.length; i++) {
          let item = data[i];
          $("tbody").append(`<tr>
          <td>${item.name}</td>
          <td>${item.city}</td>
          <td>
            <button data-id=${item.id} id="delete" type="button" class="btn btn-danger">删除</button>
            <button data-id=${item.id} id="revise" type="button" class="btn btn-info" data-toggle="modal" data-target="#revise">修改</button>
          </td>
        </tr>`);
        }
      }
      renderTbody(data);
      //删除
      $("tbody").on("click", "#delete", function (event) {
        let dataId = parseInt($(event.target).attr("data-id"));
        console.log(dataId);
        for (i = 0; i < data.length; i++) {
          if (dataId === data[i].id) {
            data.splice(i, 1);
          }
        }
        renderTbody(data);
      });
      //添加
      $("#add").on("click", function () {
        let id = parseInt($("#tbodyId").val());
        let name = $("#tbodyName").val();
        let city = $("#tbodyCity").val();
        console.log(id, name, city);
        // 判空
        if (!id && !name && !city) {
          return;
        }
        const obj = {
          id,
          name,
          city,
        };
        data.push(obj);
        renderTbody(data);
        $("#tbodyId").val("");
        $("#tbodyName").val("");
        $("#tbodyCity").val("");
      });
      //修改
      $("tbody").on("click", "#revise", function (event) {
        let dataId = parseInt($(event.target).attr("data-id"));
        // console.log(dataId);
        const currentData = data.find((item) => {
          console.log(item);
          return item.id === dataId;
          console.log(dataId);
        });
        $("#dataId").val(currentData.id);
        $("#dataName").val(currentData.name);
        $("#dataCity").val(currentData.city);
        //确定点击
        $("#rev").on("click", (event)=> {
          let id = parseInt($("#dataId").val());
          let name = $("#dataName").val();
          let city = $("#dataCity").val();
        //   console.log(id, name, city);
          for(i=0;i<data.length;i++){
            let item = data[i];
            console.log(item)
            if(dataId===item.id){
                item.id=id;
                item.name=name;
                item.city = city;
            }
          }
          renderTbody(data)
        });
        renderTbody(data)
      });
    </script>
  </body>
</html>
